<div class="yu-calendar-manage">
	<link rel="stylesheet" type="text/css" href="pages/use/apps/calendarManager/calendarManager.css" />
	<yu-panel title="日历管理">
		<yu-row :gutter="24">
			<yu-col :span="5">
				<div style="margin:5px 10px 0 0;border-top-left-radius: 5px;border-top-right-radius: 5px;">
					<yu-menu mode="horizontal" @select="handleSelect">
						<yu-submenu index="calendarInfo" style="width: 50%">
							<template slot="title"> 日历管理</template>
							<yu-menu-item index="calendarInfo_add" v-if="addClassFnButton">新增</yu-menu-item>
							<yu-menu-item index="calendarInfo_update" v-if="updateClassFnButton">修改</yu-menu-item>
							<yu-menu-item index="calendarInfo_delete" v-if="deleteClassFnButton">删除</yu-menu-item>
						</yu-submenu>
						<yu-menu-item index="calendarType" style="width: 50%" v-if="setCalendarTypeButton">类型设置</yu-menu-item>
					</yu-menu>
				</div>
				<yu-xtree ref="refTree" :height="height" @node-click="nodeClickFn" :data-url="treeDataUrl" data-id="currentNodeId" data-label="currentNodeName"
				 data-pid="parentId" :data-async="async" data-root="0000" icon="iconPath" style="margin:0px 10px 0 0;">
				</yu-xtree>
			</yu-col>

			<yu-col :span="19" v-show="!isCalendarData">
				<yu-xform related-table-name="refTable" form-type="search" v-model="searchFormdata">
					<yu-xform-group :column="4">
						<yu-xform-item label="系统名称" placeholder="系统名称" ctype="input" name="appName" :disabled="appNameDisabled"></yu-xform-item>
						<yu-xform-item label="日历名称" placeholder="日历名称" ctype="input" name="calendarName" :disabled="calendarNameDisabled"></yu-xform-item>
						<yu-xform-item label="年份" placeholder="年份" ctype="select" name="yearValue" :options="yearOption"></yu-xform-item>
					</yu-xform-group>
				</yu-xform>
				<yu-toolBar>
					<yu-button @click="addDataFn" v-show="isDataAdd&&addFnButton">新增</yu-button>
				</yu-toolBar>
				<div ref="tableBox" style="overflow: auto;">
					<yu-xtable :height="tbHeight" ref="refTable" row-number :data-url="dataUrl" :pageable="true">
						<yu-xtable-column label="应用系统名称" :show-overflow-tooltip="true"  prop="appName" sortable v-if="appCodeShow"></yu-xtable-column>
						<yu-xtable-column label="日历编码" :show-overflow-tooltip="true" prop="calendarCode"></yu-xtable-column>
						<yu-xtable-column label="日历名称" :show-overflow-tooltip="true" prop="calendarName">
						</yu-xtable-column>
						<yu-xtable-column label="年份" prop="yearValue">
							<template slot-scope="scope">
								<a style="text-decoration:underline;color:#636CE4 " href="javascipt:void(0);" @click="viewDataFn(scope.row)">{{ scope.row.yearValue }}</a>
							</template>
						</yu-xtable-column>
						<yu-xtable-column label="操作" prop="">
							<template slot-scope="scope">
								<yu-button @click="modifyDataFn(scope.row)" type="primary" size="small" v-if="updateFnButton">&nbsp;&nbsp;修改&nbsp;&nbsp;</yu-button>
								<yu-button @click="deleteFn(scope.row)" type="danger" size="small" v-if="deleteFnButton">&nbsp;&nbsp;删除</yu-button>
							</template>
						</yu-xtable-column>
					</yu-xtable>
				</div>
			</yu-col>

			<yu-col :span="19" v-show="isCalendarData">
				<yu-row>
					<yu-col :span="24">
						<div style="background-color:#edf2f7;height: 50px;margin-top: 5px;width: 100%;line-height: 50px;">
							<div style="float: left;padding-left: 30px;display: inline">

								<span style="font-size: 14px;">年份:</span>
								<yu-select v-model="selectYear" placeholder="请选择" style="width:120px;display: inline-block;margin-left: 10px;" :disabled="yeaOprReadOnly">
									<yu-option v-for="item in years" :key="item.key" :label="item.label" :value="item.key" :disabled="item.disabled">
									</yu-option>
								</yu-select>

								<span style="font-size: 14px;display: inline-block;padding-left: 50px;" v-show="!isView">初始化方式:</span>
								<yu-select v-model="initType" placeholder="请选择" style="width:160px;display: inline-block;margin-left: 10px;" v-show="!isView">
									<yu-option v-for="item in initCalendarType" :key="item.key" :label="item.label" :value="item.key">
									</yu-option>
								</yu-select>
								<yu-button @click="iniCurrentSelectYear" style="margin-left: 15px;" v-show="!isView">初始化</yu-button>
								<yu-button type="success" @click="saveCalendarData" style="margin-left: 15px; " v-show="!isView">保存</yu-button>
								<yu-button @click="reCalendarBack">返回</yu-button>
							</div>
						</div>
					</yu-col>
					<yu-col :span="24">
						<yu-radio-group v-model="selectDayType" style="margin-left: 30px;margin-top:20px;margin-bottom: 15px;" v-for="item in calendarTypeDatas">
							<yu-radio :label="item.typeCode">
								<span>{{item.typeName}}</span>
								<div class="calendarTypeCss" :style="item.backColor">&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
								</div>
							</yu-radio>
						</yu-radio-group>
					</yu-col>
					<yu-col :span="24">
						<yu-xcalender ref="xcalender" :disable-before-date="false" :color-type="colorTypes" :sign-data="signDatas" :day-type="selectDayType"
						 :show-month="showDateMonths"></yu-xcalender>
					</yu-col>
				</yu-row>
			</yu-col>
		</yu-row>
		<yu-xdialog :title="viewClassTitle" :visible.sync="classDialogVisible" width="700px">
			<el-form-x label-width="110px" ref="refClassForm" :group-fields="classFields" :buttons="classButtons" />
		</yu-xdialog>

		<yu-xdialog title="设置日历类型" :visible.sync="calendarTypeVisible" width="700px">
			<yu-toolBar>
					<el-button @click="addCalendarType">新增</el-button>
					<el-button @click="deleteCalendarType">删除</el-button>
				</el-button-group>
			</yu-toolBar>
			<yu-xtable selection-type="checkbox" ref="refCalendarTypeTab" :pageable="false" :data="calendarTypeDatas" style="width: 100%"
			 max-height="400">
				<yu-xtable-column label="编号" type="index"></yu-xtable-column>
				<yu-xtable-column prop="typeName" label="类型名称">
					<template slot-scope="scope">
						<div slot="reference" v-if="scope.row.typeCode=='1' ||scope.row.typeCode=='0'">
							<font color='red'>{{scope.row.typeName}}</font>
						</div>
						<div slot="reference" v-if="scope.row.typeCode!='1' && scope.row.typeCode!='0'">
							<el-input v-show=true size="small" v-model="scope.row.typeName"></el-input>
						</div>
					</template>
				</yu-xtable-column>
				<yu-xtable-column prop="typeColor" label="颜色类型" width="80">
					<template slot-scope="scope">
						<div slot="reference">
							<yu-color-picker v-model="scope.row.typeColor"></yu-color-picker>
						</div>
					</template>
				</yu-xtable-column>
				<yu-xtable-column prop="remark" label="备注">
					<template slot-scope="scope">
						<div slot="reference">
							<el-input v-show=true size="small" v-model="scope.row.remark"></el-input>
						</div>
					</template>
				</yu-xtable-column>
			</yu-xtable>
			<div class="yu-grpButton">
				<yu-button @click="cancelFn">取消</yu-button>
				<yu-button type="primary" @click="saveCalendarTypeFn">保存</yu-button>
			</div>
		</yu-xdialog>
	</yu-panel>
</div>

<style>
	.calendarTypeCss {
		width: 30px;
		display: inline;
	}
</style>